<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>诚赉健康OA管理</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="loading" v-if="mask">
            <img src="../img/load.gif">
        </div>
        <div class="userBox">
            <img :src="userInfo.headImg" alt="" v-if="userInfo.headImg">
            <img src="./img/about.png" alt="" v-else>
            <div>
                <span>Hello,</span>
                <span>
                    {{userName}}
                    <van-tag type="primary">{{departmentName}}</van-tag>
                </span>

                <!-- <div>
                    <input :class="isFocus?'focusInput':''" type="text" @blur="saveName" :disabled="!isFocus"
                        v-model="userName" ref="nameInput" placeholder="请输入用户名">
                    <van-icon name="edit" @click="editHandle" v-if="!isFocus"></van-icon>
                    <van-tag type="primary">{{departmentName}}</van-tag>
                </div> -->
            </div>
        </div>
        <img src="./img/banner.png" alt="" class="banner">
        <div class='titleBox'>
            <div>
                <span>审批列表</span>
                <span class="addBtnTip" @click="addHandle">添加审批</span>
            </div>
            <span>这里查看您的审批信息</span>
        </div>
        <div class="listBox">

            <van-tabs v-model="active" sticky>
                <van-tab :title="ele.title" v-for="(ele,eIndex) in approvalList" :key="eIndex">
                    <template v-if="ele.list.length!=0">
                        <div class="listMain" v-for="(item,index) in ele.list" @click="toDetail(item)">
                            <div class="listTop">
                                <div>申请部门：{{item.department}}</div>
                                <div :class=" item.currentState==2? 'finishTip':item.currentState==1?'finish':''">
                                    {{item.currentState==2?'已驳回':item.currentState==1?'已通过':'进行中'}}
                                </div>
                            </div>
                            <div class="listCon">
                                <div>{{item.projectName}}</div>
                                <div>
                                    <img src="./img/time.png" alt="">申请时间：
                                    <span>{{item.applyTime}}</span>
                                </div>
                                <div>
                                    <img src="./img/add.png" alt="">当前审批进程：
                                    <span>{{item.currentState==2?'已驳回':item.currentState==1?'已通过':'进行中'}}</span>
                                </div>
                                <div class="reasonCon" v-if="item.currentState==2&&item.overruleReason">
                                    驳回原因: {{item.overruleReason}}
                                </div>
                            </div>
                            <div class="handleBox">
                                <span>查看详情</span>
                                <van-icon name="arrow"></van-icon>
                            </div>
                        </div>
                    </template>
                    <div v-else class="emptyBox">
                        <img src="./img/empty.png" alt="">
                        <span>暂无记录</span>
                    </div>
                </van-tab>
            </van-tabs>

        </div>

        <!-- 首次登录  用户绑定身份 -->
        <van-action-sheet :close-on-click-overlay="false" v-model="showAction" description="请绑定您所在的部门"
            :actions="departmentList" @select="onSelect" />


    </div>


    <script src="../js/vue.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var code = GetQueryString("code");
        // alert(code)


        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                approvalList: [],
                departmentList: [],
                showAction: false,
                userName: '',
                isFocus: false,
                userInfo: '',
                departmentName: '',
                active: 0,

                approvalList: [
                    {
                        title: '全部',
                        list: []
                    },
                    {
                        title: '进行中',
                        list: []
                    },
                    {
                        title: '已通过',
                        list: []
                    },
                    {
                        title: '已驳回',
                        list: []
                    },
                ]

            },
            created() {
                this.getList()
                this.getDepartment()
                this.getInfo()
           
            },
            methods: {
                saveName() {
                    if (this.userName == '') {
                        this.$toast('请输入用户名')
                        return
                    }
                    this.isFocus = false
                    console.log(this.userName);
                    this.$toast('保存成功')
                },
                editHandle() {
                    console.log(this.$refs);
                    this.$refs.nameInput.focus()
                    this.isFocus = true
                },
                getInfo() {
                    var _this = this;
                    _this.mask = true;
                    // alert(code)
                    // alert('in')
                    ajax({
                        url: newUrl + "varia/getUserInfo",
                        type: 'post',
                        data: {
                            code: code,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            console.log(res);
                            // alert(res)
                            var res = JSON.parse(res)
                            if (res.flag) {
                                console.log(res);
                                // alert(1)
                                _this.userInfo = res.data
                                _this.userName = res.data.userName
                                sessionStorage.applyUserInfo = JSON.stringify(res.data)
                                if (!_this.userInfo.department) {
                                    _this.showAction = true
                                } else {
                                    sessionStorage.userDepartmentId = _this.userInfo.department
                                    _this.getDepartmentName(_this.userInfo.department)
                                }
                                _this.mask = false
                            } else {
                                _this.mask = false
                                _this.$toast('登录失败，请退出重新登录')
                            }
                        },
                    })
                },

                getDepartmentName(id) {
                    var that = this;
                    this.departmentList.forEach((item, index) => {
                        if (item.id == id) {
                            that.departmentName = item.name
                        }
                    })
                },


                // 选择身份
                onSelect(item) {
                    console.log(item);
                    // alert(this.userInfo.aduserId)
                    // alert(item.id)
                    this.showAction = false;

                    var _this = this;
                    _this.mask = true;
                    ajax({
                        type: "post",
                        url: newUrl + "varia/editAdUser",
                        data: {
                            aduserId: _this.userInfo.aduserId,
                            department: item.id
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (data) {
                            var res = JSON.parse(data)
                            if (res.flag) {
                                _this.mask = false;
                                _this.$toast('绑定成功');
                                _this.showAction = false
                                sessionStorage.userDepartmentId = item.id
                                _this.getDepartmentName(item.id)

                            }
                        }
                    })
                },

                addHandle() {
                    window.location.replace("submitApply.html")
                },

                //获取审批列表
                getList() {
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "varia/getApproval",
                        // data: {

                        // },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (data) {
                            var res = JSON.parse(data)
                            console.log(res);


                            res.data = res.data.sort((a, b) => {
                                return b.approvalId - a.approvalId
                            })

                            res.data.forEach((item, index) => {
                                that.approvalList[0].list.push(item)
                                if (item.currentState == 0) {
                                    that.approvalList[1].list.push(item)
                                } else if (item.currentState == 1) {
                                    that.approvalList[2].list.push(item)
                                } else if (item.currentState == 2) {
                                    that.approvalList[3].list.push(item)
                                }
                            })
                            
                            console.log(that.approvalList);
                        }
                    })
                },
                // 审批详情
                toDetail(item) {
                    sessionStorage.applyDetail = JSON.stringify(item);
                    window.location.replace("applyDetail.html")
                },


                // 获取部门列表
                getDepartment() {
                    var that = this;
                    // that.mask = true
                    ajax({
                        type: "post",
                        url: newUrl + "varia/getAdepartment",
                        data: {},
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                // that.mask = false
                                that.departmentList = []
                                console.log(res.data);
                                res.data.forEach((item, index) => {
                                    that.departmentList.push({
                                        id: item.adepartmentId,
                                        name: item.adepartmentName,
                                    })
                                })
                                console.log(that.departmentList);

                            } else {
                                that.$toast('查询失败');
                            }
                        },
                    })
                },
            }
        })

    </script>

</body>

</html>